<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>试卷</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/bootstrap/js/jQuery.js"></script>
    <script type="text/javascript">
        /**
         *  examTime：考试总时间，精确度秒。
         *  useTime：使用时间，精确度秒。
         *  remainTime：剩余时间，精确度秒。
         */
        var examTime = 20 * 60;
        var useTime = 0;
        var remainTime = examTime;

        function showCount() {

            if (remainTime == 0) {
                $("#myForm").submit();
            }

            useTime += 1;
            remainTime -= 1;

            var hourU = Math.floor(useTime / 3600);
            var minuteU = Math.floor((useTime - hourU * 3600) / 60);
            var secondU = Math.floor(useTime - hourU * 3600 - minuteU * 60);

            var useTimeHtml = format(hourU) + ":" + format(minuteU) + ":" + format(secondU);
            $("#useTime").html(useTimeHtml);

            var hourR = Math.floor(remainTime / 3600);
            var minuteR = Math.floor((remainTime - hourR * 3600) / 60);
            var secondR = Math.floor(remainTime - hourR * 3600 - minuteR * 60);

            var remainTimeHtml = format(hourR) + ":" + format(minuteR) + ":" + format(secondR);
            $("#remainTime").html(remainTimeHtml);
        }

        function format(timeNumber) {
            if (timeNumber < 10) {
                return "0" + timeNumber;
            } else {
                return timeNumber;
            }
        }

        setInterval(showCount, 1000);
    </script>
</head>
<body>
<div class="data_list">
    <div class="data_info">
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            考试时间：<strong>20 分钟</strong>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            计时：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="useTime" style="font-weight: bold;"></span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            剩余时间：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="remainTime" style="font-weight: bold;"></span>
        </p>
        <hr/>
        <p class="examTitle">${paper.name}&nbsp;&nbsp;考试卷</p>
        <p class="examScoreInfo">(&nbsp;满分120&nbsp;&nbsp;单选题60分&nbsp;&nbsp;多选题60分&nbsp;)</p>
    </div>
    <div class="data_exam_content">
        <form id="myForm" action="<%=pageContext.getRequest().getServletContext()%>/examAction!save" method="post">
            <input type="hidden" name="exam.student.id" value="${currentUser.id }"/>
            <input type="hidden" name="exam.paper.id" value="${paper.id }"/>
            <strong><strong>一，单选题</strong></strong>(每题10分，答错不得分)<br/><br/>
            <c:forEach var="s" items="${singleQuestionList}" varStatus="status">
                <strong>[&nbsp;${status.index+1 }&nbsp;]&nbsp;${s.subject }</strong><br/><br/>
                <label class="radio"><input type="radio" name="single-${s.id }" value="A"/>${s.optionA }</label>
                <label class="radio"><input type="radio" name="single-${s.id }" value="B"/>${s.optionB }</label>
                <label class="radio"><input type="radio" name="single-${s.id }" value="C"/>${s.optionC }</label>
                <label class="radio"><input type="radio" name="single-${s.id }" value="D"/>${s.optionD }</label>
                <br/>
            </c:forEach>
            <br/>
            <strong><strong>二，多选题</strong></strong>(每题20分，答错不得分)<br/><br/>
            <c:forEach var="m" items="${multipleQuestionList}" varStatus="status">
                <strong>[&nbsp;${status.index+1 }&nbsp;]&nbsp;${m.subject }</strong><br/><br/>
                <label class="checkbox"><input type="checkbox" name="more-${m.id }" value="A"/>${m.optionA }</label>
                <label class="checkbox"><input type="checkbox" name="more-${m.id }" value="B"/>${m.optionB }</label>
                <label class="checkbox"><input type="checkbox" name="more-${m.id }" value="C"/>${m.optionC }</label>
                <label class="checkbox"><input type="checkbox" name="more-${m.id }" value="D"/>${m.optionD }</label>
                <br/>
            </c:forEach>
            <button class="btn btn-primary" type="submit">交卷</button>
        </form>
    </div>
</div>
</body>
</html>
